<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>图片的切换</title>
    <style>
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
            width:200px;
            margin:20px auto;
            background-color:lightseagreen;
            padding-bottom: 20px;
            /*padding-left:10px;*/
            box-sizing: border-box;
        }
        h2{
            text-align: center;
            background-color:#ccc;
            margin:0px;
        }
        li{
            width:180px;
            height:150px;
            position:relative;
            margin-bottom:10px;
            margin-left:5px;
            overflow: hidden;
        }
        img{
            position:absolute;
            top:0px;
            left:10px;
        }
        .two{
            left:200px;
        }
        p{
            width:180px;
            left:10px;
            margin:0;
            position: absolute;
            padding-left:25px;
            box-sizing: border-box;
            background-color:coral;
        }
        .frist{
            bottom:0px;
        }
        .second{
            bottom:-25px;
        }
    </style>
</head>

<body>
<ul>
    <h2>专辑推荐</h2>
    <li>
        <img class="one" src="./img/1_1.jpg" alt="">
        <img class="two" src="./img/1_2.jpg" alt="">
        <p class="frist">cocon/可可伲</p>
        <p class="second">几何围网-极致灿烂</p>
    </li>
    <li>
        <img class="one" src="./img/2_1.jpg" alt="">
        <img class="two" src="./img/2_2.jpg" alt="">
        <p class="frist">cocon/可可伲</p>
        <p class="second">几何围网-极致灿烂</p>
    </li>
     <li>
        <img class="one" src="./img/3_1.jpg" alt="">
        <img class="two" src="./img/3_2.jpg" alt="">
        <p class="frist">cocon/可可伲</p>
        <p class="second">几何围网-极致灿烂</p>
    </li>
</ul>
<script src="./jquery.js"></script>
</body>

</html>
<script>
    $('li').mouseover(function(){
        $(this).find('.one').stop().animate({left:-200},500)
        $(this).find('.two').stop().animate({left:10},500)
    })

     $('li').mouseout(function(){
        $(this).find('.one').stop().animate({left:10},500)
        $(this).find('.two').stop().animate({left:200},500)
    })

    $('li').mouseover(function(){
        $(this).find('.frist').stop().animate({bottom:-25},300)
        $(this).find('.second').stop().animate({bottom:0},300)
    })

     $('li').mouseout(function(){
        $(this).find('.frist').stop().animate({bottom:0},300)
        $(this).find('.second').stop().animate({bottom:-25},300)
    })

</script>